<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>水平堆叠头像示例</title>
  <style>
    /* 聊天项容器 */
    .chat-item {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      max-width: 400px;
    }

    /* 头像容器（定位参考） */
    .avatars {
      position: relative;
      width: 40px;   /* 容器宽度，控制头像显示范围 */
      height: 40px;  /* 固定高度，确保头像垂直对齐 */
      margin-right: 12px;
    }

    /* 单个头像基础样式 */
    .avatar {
      position: absolute;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid #fff; /* 白色边框，分隔重叠头像 */
      object-fit: cover;      /* 保持图片比例 */
      top: 0;                 /* 垂直方向对齐（统一顶部） */
    }

    /* 第二个头像：水平右移（垂直仍对齐） */
    .avatar:nth-child(2) {
      left: 10px;  /* 水平偏移，与第一个头像重叠 */
      z-index: 2;  /* 层级高于第一个 */
    }

    /* 未读消息徽章（定位在头像容器右上角） */
    .badge {
      position: absolute;
      right: -5px; /* 相对于头像容器的右上角 */
      top: -5px;
      background-color: #ff4d4f;
      color: #fff;
      font-size: 12px;
      font-weight: bold;
      padding: 2px 6px;
      border-radius: 50%;
      z-index: 3; /* 徽章在最上层 */
    }

    /* 文字信息区域 */
    .info {
      flex: 1; /* 占满剩余空间 */
      overflow: hidden; /* 防止文字溢出 */
      text-overflow: ellipsis; /* 溢出时显示省略号 */
      white-space: nowrap; /* 文字不换行 */
    }

    .name {
      font-weight: bold;
      font-size: 14px;
      color: #333;
    }

    .message {
      font-size: 12px;
      color: #999;
    }

    /* 聊天按钮 */
    .chat-btn {
      background-color: #27ae60;
      color: #fff;
      border: none;
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="chat-item">
    <!-- 头像堆叠区域 -->
    <div class="avatars">
      <img
        src="https://picsum.photos/id/1005/100/100"
        class="avatar"
        alt="头像1"
      />
      <img
        src="https://picsum.photos/id/1012/100/100"
        class="avatar"
        alt="头像2"
      />
      <span class="badge">8</span> <!-- 未读消息数 -->
    </div>

    <!-- 文字信息 -->
    <div class="info">
      <div class="name">瓦罗大啧啧、铁打的牛子...</div>
      <div class="message">[新消息] 好的准时到</div>
    </div>

    <!-- 聊天按钮 -->
    <button class="chat-btn">聊一聊</button>
  </div>
</body>
</html>